/**
 * CSS Reset
 *
 * 参考来源：Bootstrap _reboot.scss(v4.3.1) 和 Normalize.css(v8.0.1)
 * 重要的是，不破坏页面在无样式状态下的可阅读性
 */

/**
 * 避免滥用通配符，因为并不是所有的样式都需要作用在每一个元素上
 * 从开发者的角度来说，使用 border-box 模式描述盒子，是更便利开发的
 */
*,
*::before,
*::after {
  box-sizing: border-box; /* Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`. */
}

/**
 * 改变一些 iOS 的默认行为，以及入乡随俗的中文行高设置
 */
html {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 1.Change the default tap highlight to be completely transparent in iOS. */
  -webkit-text-size-adjust: 100%; /* 2.Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. */
  line-height: 1.5; /* 3.Correct the line height in all browsers. */
}

/**
 * 使低版本的浏览器兼容 HTML5 新的块级元素
 * 对于大部分浏览器来说，这一部分都是多余的，迟早会被移除
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block; /* Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers) */
}

/**
 * 设置背景色可以避免某些情况下因为背景透明出现的页面穿透
 * body 元素的 margin 移除已是老生常谈了
 */
body {
  background-color: #fff; /* 1.As a best practice, apply a default `background-color`. */
  margin: 0; /* 2.Remove the margin in all browsers. */
}

/**
 * 修正 `h1` 的 font-size 和 margin 值。在 `section` 和 `article` 中，`h1` 被设置为和 `h2` 一样的大小
 */

/* Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari. */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box; /* 1.Add the correct box sizing in Firefox. */
  height: 0; /* 1 */
  overflow: visible; /* 2.Show the overflow in Edge and IE. */
}

abbr[title] {
  border-bottom: 0; /* 1.Remove the bottom border in Firefox 39-. */
  text-decoration: underline; /* 2.Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */
  text-decoration: underline dotted; /* 2 */
  text-decoration-skip-ink: none; /* 3.Prevent the text-decoration to be skipped. */
}

b,
strong {
  font-weight: bolder; /* Add the correct font weight in Chrome, Edge, and Safari */
}

small {
  font-size: 80%; /* Add the correct font size in all browsers */
}

/* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub { bottom: -0.25em; }
sup { top: -0.5em; }

a {
  background-color: transparent; /* 1.Remove the gray background on active links in IE 10. */
}

code,
kbd,
pre,
samp {
  font-family: monospace;
  font-size: 1em; /* Correct the odd `em` font sizing in all browsers. */
}

pre {
  overflow: auto; /* Don't allow content to break outside */
}

img {
  border-style: none; /* Remove the border on images inside links in IE 10-. */
}

svg {
  overflow: hidden; /* Workaround for the SVG overflow bug in IE10/11 is still required. */
}

/**
 * 表格边框合并
 */
table {
  border-collapse: collapse; /* Prevent double borders */
}

/**
 * 重置 `th` 的文本水平对齐方式，与 `td` 一致，可从父级继承
 */
th {
  text-align: inherit; /* Matches default `<td>` alignment by inheriting from the closest parent with a set `text-align`. */
}

button {
  border-radius: 0; /* Remove the default `border-radius` that macOS Chrome adds. */
}

/**
 * 表单元素继承父级的文本样式
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  margin: 0; /* Remove the margin in Firefox and Safari */
}

button,
input {
  overflow: visible; /* Show the overflow in Edge */
}

button,
select {
  text-transform: none; /* Remove the inheritance of text transform in Firefox */
}

select {
  word-wrap: normal; /* Remove the inheritance of word-wrap in Safari. */
}

button,
[type="button"], /* 1.Prevent a WebKit bug where (2) destroys native `audio` and `video` controls in Android 4. */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 2.Correct the inability to style clickable types in iOS and Safari. */
}

/* Remove inner border and padding from Firefox. */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

input[type="checkbox"],
input[type="radio"] {
  padding: 0; /* Remove the padding in IE 10- */
}

/* Remove the default appearance of temporal inputs to avoid a Mobile Safari bug where setting a custom line-height prevents text from being vertically centered within the input. */
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"] {
  -webkit-appearance: listbox;
}

textarea {
  overflow: auto; /* 1.Remove the default vertical scrollbar in IE. */
  resize: vertical; /* 2.Textareas should really only resize vertically so they don't break their (horizontal) containers. */
}

fieldset {
  min-width: 0; /* 1.Browsers set a default `min-width: min-content;` on fieldsets, unlike e.g. `<div>`s, which have `min-width: 0;` by default. So we reset that to ensure fieldsets behave more like a standard block element. */
  padding: 0.35em 0.75em 0.625em; /* 2.Correct the padding in Firefox. */
}

legend {
  color: inherit; /* 1.Correct the color inheritance from `fieldset` elements in IE. */
  display: block; /* 2.Correct the text wrapping in Edge and IE. */
  max-width: 100%; /* 2 */
  padding: 0; /* 3.Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */
  white-space: normal; /* 2 */
}

progress {
  vertical-align: baseline; /* Add the correct vertical alignment in Chrome, Firefox, and Opera. */
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; /* Correct the cursor style of increment and decrement buttons in Chrome. */
}

[type="search"] {
  -webkit-appearance: none;
  outline-offset: -2px; /* Correct the outline style in Safari. */
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; /* Remove the inner padding in Chrome and Safari on macOS. */
}

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1.Correct the inability to style clickable types in iOS and Safari. */
  font: inherit; /* 2.Change font properties to `inherit` in Safari. */
}

output {
  display: inline-block; /* Correct element displays */
}

summary {
  cursor: pointer;
  display: list-item; /* Add the correct display in all browsers */
}

template {
  display: none; /* Add the correct display in IE */
}

/**
 * Always hide an element with the `hidden` HTML attribute (from PureCSS).
 * Needed for proper display in IE 10-.
 */
[hidden] {
  display: none !important;
}
